.font-Roboto{
  font-family:'Roboto', Arial, sans-serif;
}
.no-select{
  -webkit-touch-callout:none;
  -webkit-user-select:none;
  -moz-user-select:none;
  -ms-user-select:none;
  user-select:none;
}
.disable-user-select{
  -webkit-user-select:none;
     -moz-user-select:none;
      -ms-user-select:none;
          user-select:none;
}
@font-face{
  font-family:'Roboto';
  src:url('font/Roboto-Regular.ttf');
}
@font-face{
  font-family:'Segoe UI';
  src:url('font/segoeui-light.woff2');
}
@font-face{
  font-family:'Segoe UI Bold';
  src:url('font/segoeui-semilight.woff2');
}
div.SQLFlowGraph{
  font-family:Arial, sans-serif;
  -webkit-font-smoothing:antialiased;
}
div.SQLFlowGraph *{
  margin:0;
  padding:0;
  box-sizing:border-box;
}
div.SQLFlowGraph ul,
div.SQLFlowGraph ol{
  list-style:none;
}
div.SQLFlowGraph hr{
  border:0;
}
div.SQLFlowGraph h1,
div.SQLFlowGraph h2,
div.SQLFlowGraph h3,
div.SQLFlowGraph h4,
div.SQLFlowGraph h5,
div.SQLFlowGraph h6{
  font-weight:normal;
  cursor:default;
}
div.SQLFlowGraph h1{
  font-size:12px;
}
div.SQLFlowGraph h2{
  font-size:14px;
}
div.SQLFlowGraph i{
  font-style:normal;
}
div.SQLFlowGraph address{
  font-style:normal;
}
div.SQLFlowGraph button{
  cursor:pointer;
}
div.SQLFlowGraph a{
  cursor:pointer;
}
div.SQLFlowGraph a:hover,
div.SQLFlowGraph a:link,
div.SQLFlowGraph a:visited,
div.SQLFlowGraph a:active{
  text-decoration:none;
  color:black;
}
.hide{
  display:none !important;
}

.Flex{
  display:-ms-flexbox;
  display:flex;
}
.Flex.hide{
  display:none;
}
.Flex.Col{
  -ms-flex-direction:column;
      flex-direction:column;
}
.Flex.ColCenter{
  -ms-flex-direction:column;
      flex-direction:column;
  -ms-flex-align:center;
      align-items:center;
}
.Flex.ColCenterCenter{
  -ms-flex-direction:column;
      flex-direction:column;
  -ms-flex-align:center;
      align-items:center;
  -ms-flex-pack:center;
      justify-content:center;
}
.Flex.ColCenterEnd{
  -ms-flex-direction:column;
      flex-direction:column;
  -ms-flex-align:end;
      align-items:flex-end;
  -ms-flex-pack:center;
      justify-content:center;
}
.Flex.ColStartBetween{
  -ms-flex-direction:column;
      flex-direction:column;
  -ms-flex-align:start;
      align-items:flex-start;
  -ms-flex-pack:justify;
      justify-content:space-between;
}
.Flex.ColStartCenter{
  -ms-flex-direction:column;
      flex-direction:column;
  -ms-flex-align:start;
      align-items:flex-start;
  -ms-flex-pack:center;
      justify-content:center;
}
.Flex.ColCenterBetween{
  -ms-flex-direction:column;
      flex-direction:column;
  -ms-flex-align:center;
      align-items:center;
  -ms-flex-pack:justify;
      justify-content:space-between;
}
.Flex.ColStretchCenter{
  -ms-flex-direction:column;
      flex-direction:column;
  -ms-flex-pack:center;
      justify-content:center;
}
.Flex.ColStretchBetween{
  -ms-flex-direction:column;
      flex-direction:column;
  -ms-flex-pack:justify;
      justify-content:space-between;
}
.Flex.ColBetweenCenter{
  -ms-flex-direction:column;
      flex-direction:column;
  -ms-flex-align:space-between;
      align-items:space-between;
  -ms-flex-pack:center;
      justify-content:center;
}
.Flex.ColEnd{
  -ms-flex-direction:column;
      flex-direction:column;
  -ms-flex-align:end;
      align-items:flex-end;
}
.Flex.ColEnd{
  -ms-flex-direction:column;
      flex-direction:column;
  -ms-flex-align:end;
      align-items:flex-end;
}
.Flex.RowBetween{
  -ms-flex-pack:justify;
      justify-content:space-between;
}
.Flex.RowBetweenCenter{
  -ms-flex-pack:justify;
      justify-content:space-between;
  -ms-flex-align:center;
      align-items:center;
}
.Flex.RowAround{
  -ms-flex-pack:distribute;
      justify-content:space-around;
}
.Flex.RowAroundCenter{
  -ms-flex-pack:distribute;
      justify-content:space-around;
  -ms-flex-align:center;
      align-items:center;
}
.Flex.RowEvenly{
  -ms-flex-pack:space-evenly;
      justify-content:space-evenly;
}
.Flex.RowEvenlyCenter{
  -ms-flex-pack:space-evenly;
      justify-content:space-evenly;
  -ms-flex-align:center;
      align-items:center;
}
.Flex.RowStartCenter{
  -ms-flex-align:center;
      align-items:center;
}
.Flex.RowStartEnd{
  -ms-flex-align:end;
      align-items:flex-end;
}
.Flex.RowCenter{
  -ms-flex-pack:center;
      justify-content:center;
}
.Flex.RowCenterCenter{
  -ms-flex-pack:center;
      justify-content:center;
  -ms-flex-align:center;
      align-items:center;
}
.Flex.RowCenterEnd{
  -ms-flex-pack:center;
      justify-content:center;
  -ms-flex-align:end;
      align-items:flex-end;
}
.Flex.RowEnd{
  -ms-flex-pack:end;
      justify-content:flex-end;
}
.Flex.RowEndCenter{
  -ms-flex-pack:end;
      justify-content:flex-end;
  -ms-flex-align:center;
      align-items:center;
}

div.ImageCover{
  background-position:center center;
  background-size:cover;
  background-repeat:no-repeat;
}
div.ImageContain{
  background-position:center center;
  background-size:contain;
  background-repeat:no-repeat;
}

div.Overlay{
  position:fixed;
  z-index:50;
  top:0;
  left:0;
  width:100%;
  height:100%;
  background-color:rgba(0, 0, 0, 0.7);
}
div.Overlay.enter{
  opacity:0;
}
div.Overlay.enter-active{
  opacity:1;
  transition:all 0.3s;
}
div.Overlay.exit{
  opacity:1;
}
div.Overlay.exit-active{
  opacity:0;
  transition:all 0.3s;
}

div.Dialog.enter{
  opacity:0;
  -webkit-transform:translate3d(-50%, -50%, 0) scale(0.7);
          transform:translate3d(-50%, -50%, 0) scale(0.7);
}
div.Dialog.enter-active{
  opacity:1;
  -webkit-transform:translate3d(-50%, -50%, 0);
          transform:translate3d(-50%, -50%, 0);
  transition:all 0.3s;
}
div.Dialog.exit{
  opacity:1;
  -webkit-transform:translate3d(-50%, -50%, 0);
          transform:translate3d(-50%, -50%, 0);
}
div.Dialog.exit-active{
  opacity:0;
  -webkit-transform:translate3d(-50%, -50%, 0) scale(0.9);
          transform:translate3d(-50%, -50%, 0) scale(0.9);
  transition:all 0.3s;
}

div.Close{
  color:grey;
  cursor:pointer;
}
div.Close:hover{
  color:#000;
}
div.Close > svg{
  width:100%;
  height:100%;
  fill:currentColor;
}

.font-Roboto{
  font-family:'Roboto', Arial, sans-serif;
}
.no-select{
  -webkit-touch-callout:none;
  -webkit-user-select:none;
  -moz-user-select:none;
  -ms-user-select:none;
  user-select:none;
}
.disable-user-select{
  -webkit-user-select:none;
     -moz-user-select:none;
      -ms-user-select:none;
          user-select:none;
}
@-webkit-keyframes MoveOut{
  0%{
    max-height:150px;
    padding:8px;
    opacity:1;
  }
  100%{
    max-height:0;
    padding:0;
    opacity:0;
  }
}
@keyframes MoveOut{
  0%{
    max-height:150px;
    padding:8px;
    opacity:1;
  }
  100%{
    max-height:0;
    padding:0;
    opacity:0;
  }
}
ul.Notification{
  position:fixed;
  z-index:200;
  left:50%;
  bottom:25px;
  -webkit-transform:translate3d(-50%, 0, 0);
          transform:translate3d(-50%, 0, 0);
}
ul.Notification > li{
  position:relative;
  min-height:95px;
  max-height:205px;
  margin-bottom:20px;
  padding:16px 24px;
  background:#fff;
  border-radius:6px;
  box-shadow:0 0 21px 3px rgba(0, 0, 0, 0.15);
  display:-ms-flexbox;
  display:flex;
  -webkit-animation-timing-function:cubic-bezier(0.6, 0.04, 0.98, 0.34);
          animation-timing-function:cubic-bezier(0.6, 0.04, 0.98, 0.34);
}
ul.Notification > li > div{
  margin-left:24px;
  width:270px;
}
ul.Notification > li > div > h1{
  color:rgba(0, 0, 0, 0.85);
  font-size:16px;
  line-height:24px;
  margin-bottom:8px;
  font-weight:bold;
  -ms-flex:none;
      flex:none;
}
ul.Notification > li > div > h2{
  padding-right:10px;
  width:100%;
  font-size:14px;
  line-height:20px;
  color:#a1a2a2;
  white-space:pre-line;
  word-break:break-word;
  overflow:auto;
  max-height:140px;
}
ul.Notification > li > div > h2::-webkit-scrollbar{
  width:6px;
  height:6px;
}
ul.Notification > li > div > h2::-webkit-scrollbar-thumb{
  border-radius:15px;
  min-height:15px;
  -webkit-transition:all 0.3s;
  transition:all 0.3s;
  border-radius:6px;
  background-color:#ccc;
}
ul.Notification > li > svg{
  width:24px;
  height:24px;
  -ms-flex:none;
      flex:none;
}
ul.Notification > li > svg.Error{
  fill:red;
}
ul.Notification > li > svg.Attention{
  fill:#1890ff;
}
ul.Notification > li > div.Close{
  position:absolute;
  top:14px;
  right:12px;
  width:15px;
  height:15px;
}

div.Arrow > svg{
  width:100%;
  height:100%;
}
div.Arrow.ArrowRight{
  -webkit-transform:rotate(90deg);
          transform:rotate(90deg);
}
div.Arrow.ArrowDown{
  -webkit-transform:rotate(180deg);
          transform:rotate(180deg);
}
div.Arrow.ArrowLeft{
  -webkit-transform:rotate(270deg);
          transform:rotate(270deg);
}

div.Switcher{
  width:40px;
  height:18px;
  background-color:rgba(0, 0, 0, 0.25);
  border-radius:100px;
  display:-ms-flexbox;
  display:flex;
  -ms-flex-align:center;
      align-items:center;
  position:relative;
  cursor:pointer;
}
div.Switcher.checked{
  background-color:#36b999;
}
div.Switcher.checked > div{
  left:auto;
  right:3px;
}
div.Switcher.disabled{
  cursor:not-allowed;
  opacity:0.4;
}
div.Switcher > div{
  position:absolute;
  top:3px;
  left:3px;
  box-shadow:0 2px 4px 0 rgba(0, 35, 11, 0.2);
  width:12px;
  height:12px;
  background-color:#fff;
  border-radius:18px;
}

.font-Roboto{
  font-family:'Roboto', Arial, sans-serif;
}
.no-select{
  -webkit-touch-callout:none;
  -webkit-user-select:none;
  -moz-user-select:none;
  -ms-user-select:none;
  user-select:none;
}
.disable-user-select{
  -webkit-user-select:none;
     -moz-user-select:none;
      -ms-user-select:none;
          user-select:none;
}
span.Loading > svg{
  width:100%;
  height:100%;
  -webkit-animation:rotate 2s linear infinite;
          animation:rotate 2s linear infinite;
}
span.Loading > svg > circle{
  stroke:currentColor;
  stroke-width:3;
  stroke-linecap:round;
  -webkit-animation:circular 1.5s ease-in-out infinite;
          animation:circular 1.5s ease-in-out infinite;
}
@-webkit-keyframes circular{
  0%{
    stroke-dasharray:1, 200;
    stroke-dashoffset:0;
  }
  50%{
    stroke-dasharray:90, 150;
    stroke-dashoffset:-40;
  }
  100%{
    stroke-dasharray:90, 150;
    stroke-dashoffset:-120;
  }
}
@keyframes circular{
  0%{
    stroke-dasharray:1, 200;
    stroke-dashoffset:0;
  }
  50%{
    stroke-dasharray:90, 150;
    stroke-dashoffset:-40;
  }
  100%{
    stroke-dasharray:90, 150;
    stroke-dashoffset:-120;
  }
}
@-webkit-keyframes rotate{
  0%{
    -webkit-transform:rotate(0deg);
            transform:rotate(0deg);
  }
  100%{
    -webkit-transform:rotate(360deg);
            transform:rotate(360deg);
  }
}
@keyframes rotate{
  0%{
    -webkit-transform:rotate(0deg);
            transform:rotate(0deg);
  }
  100%{
    -webkit-transform:rotate(360deg);
            transform:rotate(360deg);
  }
}

div.Code{
  position:fixed;
  z-index:10;
  right:0;
  bottom:0;
  width:100%;
  background-color:white;
}
div.Code.enter{
  -webkit-transform:translate3d(0, 100%, 0);
          transform:translate3d(0, 100%, 0);
}
div.Code.enter-active{
  -webkit-transform:translate3d(0, 0, 0);
          transform:translate3d(0, 0, 0);
  transition:all 0.3s;
}
div.Code.exit{
  -webkit-transform:translate3d(0, 0, 0);
          transform:translate3d(0, 0, 0);
}
div.Code.exit-active{
  -webkit-transform:translate3d(0, 100%, 0);
          transform:translate3d(0, 100%, 0);
  transition:all 0.3s;
}
div.Code > div.Header{
  height:40px;
  background-color:#dcdcdc;
  position:relative;
}
div.Code > div.Header > div.Drag{
  position:absolute;
  height:6px;
  top:-3px;
  left:0;
  right:0;
  background:transparent;
  cursor:n-resize;
}
div.Code > div.Header > div.Title{
  position:absolute;
  left:20px;
  bottom:0;
  background-color:#f8f8f8;
  padding:8px 10px;
  border-radius:5px 5px 0 0;
  font-size:14px;
}
div.Code > div.Header > div.Close{
  position:absolute;
  top:10px;
  right:7px;
  width:20px;
  height:20px;
}
div.Code > div.Operation{
  height:20px;
  padding-left:30px;
  background-color:#f8f8f8;
}
div.Code > div.Operation > p{
  margin-right:15px;
  font-size:14px;
}
div.Code > div.Operation > svg{
  height:20px;
  width:20px;
  margin-right:15px;
  fill:#545454;
  cursor:pointer;
}
div.Code > div.Operation > svg.disabled{
  cursor:default;
  fill:#b5b5b5;
}
div.Code > div.CodeMirror{
  height:calc(100% - 40px - 20px);
}
div.Code > div.CodeMirror div.CodeMirror{
  height:100%;
}
div.Code > div.CodeMirror div.CodeMirror .highlight{
  background:#443b3b;
  color:#ffffff;
}
div.Code > div.CodeMirror div.CodeMirror .mouseover{
  background:#dadada;
  color:#ffffff;
}

.font-Roboto{
  font-family:'Roboto', Arial, sans-serif;
}
.no-select{
  -webkit-touch-callout:none;
  -webkit-user-select:none;
  -moz-user-select:none;
  -ms-user-select:none;
  user-select:none;
}
.disable-user-select{
  -webkit-user-select:none;
     -moz-user-select:none;
      -ms-user-select:none;
          user-select:none;
}
div.SQLFlowGraph{
  height:100%;
  overflow:auto;
  position:relative;
}
div.SQLFlowGraph > h1{
  height:40px;
  background-color:#e7e5e5;
  border-bottom:1px solid #d2d2d2;
}
div.SQLFlowGraph > h2{
  height:35px;
  background-color:#f7f7f7;
  border-bottom:1px solid #e3dfdf;
}
div.SQLFlowGraph > p{
  font-family:"Roboto", sans-serif;
  font-size:15px;
  color:#929292;
  padding:20px 35px;
}
div.SQLFlowGraph > div.Overlay{
  min-width:100%;
  min-height:100%;
  position:absolute;
  top:0;
  left:0;
  z-index:15;
  background-color:rgba(226, 226, 226, 0.78);
}
div.SQLFlowGraph > div.Overlay > div{
  position:absolute;
  top:50%;
  left:50%;
  -webkit-transform:translate3d(-50%, -50%, 0);
          transform:translate3d(-50%, -50%, 0);
}
div.SQLFlowGraph > div.Overlay > div > h1{
  text-align:center;
  color:#464545;
}
div.SQLFlowGraphZoom{
  position:fixed;
  z-index:5;
  top:115px;
  right:30px;
  cursor:default;
}
div.SQLFlowGraphZoom > div{
  height:25px;
  width:25px;
  padding:5px;
  border-radius:5px;
  background-color:rgba(238, 238, 238, 0.65);
  margin-bottom:25px;
}
div.SQLFlowGraphZoom > div > svg{
  height:100%;
  width:100%;
  fill:#aaaaaa;
  cursor:pointer;
}
div.SQLFlowGraphZoom > div > svg:hover{
  fill:#000;
}
div#SQLFlowGraphTables{
  position:relative;
}
div#SQLFlowGraphTables > svg{
  width:100%;
  height:100%;
}
div#SQLFlowGraphTables > svg > g > path{
  stroke:#ababab;
  stroke-width:1;
  fill:none;
}
div#SQLFlowGraphTables > svg > g > path.join{
  stroke:#a9ce76;
}
div#SQLFlowGraphTables > svg > g > polygon{
  stroke:#ababab;
  fill:#ababab;
}
div#SQLFlowGraphTables > svg > g > text{
  font-size:14px;
}
div#SQLFlowGraphTables > svg > g.highlight > path{
  stroke-width:1.4;
  stroke:#000000;
}
div#SQLFlowGraphTables > svg > g.highlight > path.join{
  stroke:#65ab04;
}
div#SQLFlowGraphTables > svg > g.highlight > polygon{
  stroke:#000000;
  fill:#000000;
}
div#SQLFlowGraphTables > svg > g.dash > path{
  stroke-dasharray:4 2;
}
div.SQLFlowGraphTable{
  position:absolute;
  border-radius:3px;
  -webkit-user-select:none;
     -moz-user-select:none;
      -ms-user-select:none;
          user-select:none;
}
div.SQLFlowGraphTable.active{
  z-index:5;
}
div.SQLFlowGraphTable.table{
  border:1px solid #91c051;
  background-color:#91c051;
}
div.SQLFlowGraphTable.view{
  border:1px solid #419A5F;
  background-color:#419A5F;
}
div.SQLFlowGraphTable.select_list{
  border:1px solid #D26B58;
  background-color:#D26B58;
}
div.SQLFlowGraphTable.insert-select{
  border:1px solid #B24B78;
  background-color:#B24B78;
}
div.SQLFlowGraphTable.update-set{
  border:1px solid #D29059;
  background-color:#D29059;
}
div.SQLFlowGraphTable.merge-insert{
  border:1px solid #893A89;
  background-color:#893A89;
}
div.SQLFlowGraphTable.merge-update{
  border:1px solid #d28f59;
  background-color:#d28f59;
}
div.SQLFlowGraphTable.select_union{
  border:1px solid #357E7E;
  background-color:#357E7E;
}
div.SQLFlowGraphTable.with_cte{
  border:1px solid #FF6E97;
  background-color:#FF6E97;
}
div.SQLFlowGraphTable.update-select{
  border:1px solid #5583d8;
  background-color:#5583d8;
}
div.SQLFlowGraphTable.function{
  border:1px solid #a0a0a0;
  background-color:#a0a0a0;
}
div.SQLFlowGraphTable > h1{
  height:22px;
}
div.SQLFlowGraphTable > h1 > span{
  text-align:center;
  text-overflow:ellipsis;
  overflow:hidden;
  display:block;
  -webkit-transform:scale(0.916);
          transform:scale(0.916);
  font-family:verdana, sans serif;
  font-size:12px;
  line-height:22px;
  color:white;
  height:100%;
  word-break:break-all;
}
div.SQLFlowGraphTable > ul{
  background-color:#ffffff;
}
div.SQLFlowGraphTable > ul > li{
  height:16px;
  cursor:default;
}
div.SQLFlowGraphTable > ul > li > span{
  text-overflow:ellipsis;
  overflow:hidden;
  display:block;
  font-family:verdana, sans serif;
  font-size:12px;
  -webkit-transform:scale(0.916);
          transform:scale(0.916);
  height:100%;
  word-break:break-all;
}
div.SQLFlowGraphTable > ul > li.highlight{
  background-color:#dddddd;
}
div.SQLFlowGraphTable > ul > li.mouseover{
  background-color:#faebd7;
}
div.SQLFlowGraphMap{
  position:fixed;
  background-color:#fff;
  border:1px solid #000;
  width:104px;
  height:104px;
  opacity:0.9;
  overflow:hidden;
  z-index:10;
  box-sizing:content-box;
  cursor:default;
}
div.SQLFlowGraphMap div.Viewport{
  z-index:1;
  left:0px;
  top:0px;
  position:absolute;
  border:2px solid #f00;
  cursor:move;
  box-sizing:content-box;
}
div.SQLFlowGraphMapTable{
  position:absolute;
  border:1px solid #000;
  background-color:#eea;
}
div.SQLFlowGraphMapTable.active{
  background-color:#f85;
}
div.SQLFlowGraphContextMenu{
  position:fixed;
  min-width:160px;
  min-height:110px;
  border:1px solid #666666;
  background:white;
  z-index:15;
  box-shadow:2px 2px 5px #888888;
  border-radius:3px;
  cursor:default;
}
div.SQLFlowGraphContextMenu > h1{
  height:22px;
  line-height:22px;
  padding:0 8px;
  background:#666666;
  text-align:center;
  color:white;
  font-size:14px;
}
div.SQLFlowGraphContextMenu > ul > li{
  color:#000000;
  padding:2px 0;
}
div.SQLFlowGraphContextMenu > ul > li.Download{
  border-top:1px solid #e8dada;
}
div.SQLFlowGraphContextMenu > ul > li.disable > h1{
  cursor:default;
  color:grey;
}
div.SQLFlowGraphContextMenu > ul > li.disable > h1:hover{
  background-color:white;
}
div.SQLFlowGraphContextMenu > ul > li > h1{
  padding:0 8px;
  height:22px;
  line-height:22px;
  font-size:14px;
  cursor:pointer;
}
div.SQLFlowGraphContextMenu > ul > li > h1:hover{
  background-color:#dddddd;
}

